<template>
    <Modal 
        :title="`分享-${currentItem.name}`" 
        v-model="shareModal.isShow">
        <Form
            ref="shareForm"
            :model="shareForm"
            :label-width="80"
            :rules="shareRules">
            <FormItem label="被分享人" prop="userIds">
                <Select filterable 
                    clearable 
                    multiple
                    filterable
                    v-model="shareForm.userIds">
                    <Option 
                        v-for="item in designerList" 
                        :key="item.id" 
                        :value="item.id" 
                        :label="item.nickname">
                        <span class="option-left">{{ item.nickname }}</span>
                        <span class="option-right">{{ item.username }}</span>
                    </Option>
                </Select>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button @click="shareModal.isShow = false;">取消</Button>
            <Button @click="shareResearch" type="primary" :loading="shareModal.loading">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { shareContent } from '@/api/scientific/share'
import { queryCompanyUsers } from '@/api/users'

export default {
    name: 'ShareModal',
    props: {
        currentItem: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            shareModal: {
                loading: false,
                isShow: false,
                userList: []
            },
            shareForm: {
                userIds: []
            },
            shareRules: {
                userIds: [
                    {required: true, type: "array", message: '不能为空', trigger: 'change' }
                ]
            },
            designerList: []
        }
    },
    filters: {
    },
    watch: {
        'shareModal.isShow': function(newVlue) {
            if (!newVlue) {
                this.handleReset('shareForm')
            }
        }
    },
    mounted() {
        this.getDesignerList()
    },
    methods: {
        // 分享科研项目
        shareResearch() {
            this.shareModal.loading = true
            this.$refs.shareForm.validate((valid) => {
                if (valid) {
                    shareContent({
                        contentId: this.currentItem.id,
                        userIds: this.shareForm.userIds
                    }).then(({ code, message }) => {
                        if (code !== 1) {
                            this.$Message.warning(message)
                            return
                        }
                        this.$Message.success('分享成功')
                        this.shareModal.isShow = false
                        this.$emit('share-success')
                    }).catch(() => {
                        this.$Message.error('分享项目异常')
                    }).finally(() => {
                        this.shareModal.loading = false
                    })
                } else {
                    this.shareModal.loading = false
                }
            })
        },
        // 重置指定的表单
        handleReset(name) {
            this.$refs[name].resetFields();
            this.shareModal.loading = false
        },
        // 获取单位管理员和单位设计师列表
        getDesignerList() {
            const params = {
                pageSize: 2147483646,
                pageIndex: 1,
                role: 'member'
            }
            queryCompanyUsers(params).then(({ code, message, data = {} }) => {
                let members = []
                if (code === 1) {
                    members = data.items || []
                } else {
                    this.$Message.warning(message)
                }
                // 需要过滤掉自己，自己归档的数据没必要再分享给自己
                this.designerList = members.filter(item => item.creator !== this.USER_ID)
            }).catch(() => {
                this.$Message.error('查询设计师列表异常')
            })
        },
        // 展示模态框
        show() {
            this.shareModal.isShow = true
        },
        // 隐藏模态框
        hide() {
            this.shareModal.isShow = false
        }
    }
};
</script>

<style scoped>
.option-left,
.option-right {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.option-left {
    width: 60%;
}

.option-right {
    width: calc(38% - 20px);
    float:right;
    margin-right: 20px;
    color:#ccc;
    text-align: right;
}
</style>